<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css" />
	<style>
		.w {
			width: 1126px;
			margin: 0 auto;
		}

		.searchBar {
			width: 600px;
			height: 45px;
			border: 1px solid #333;
			margin-top: 50px;
			border-radius: 4px;
			display: flex;
			position: relative;
		}

		.searchCon {
			flex: 1;
			outline: none;
			height: 45px;
			border: none;
			text-indent: 10px;
		}

		.searchBtn {
			width: 80px;
			background-color: #6ff;
			height: 45px;
			text-align: center;
			line-height: 45px;
			border-radius: 0 4px 4px 0px;
		}

		.searchList {
			position: absolute;
			left: -1px;
			top: 44px;
			width: -webkit-calc(100% - 79px);
			line-height: 40px;
			text-indent: 10px;
			border: 1px solid #333;
			border-top: 0;
			box-sizing: border-box;
			background-color: #fff;
			display: none;
		}
	</style>
</head>

<body>
	<!-- .searchBar>.searchCon+a.searchBtn+ul.searchList>li*4{$$} -->
	<div class="wrapSearch w">
		<div class="searchBar">
			<input class="searchCon" type="text">
			<a href="" class="searchBtn"></a>
			<ul class="searchList">
				<li><a href="">01</a></li>
				<li>02</li>
				<li>03</li>
				<li>04</li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript">
	// https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34647,34441,31254,34550,33848,34600,34584,34092,34505,26350,34627,34556,34691,34683&wd=h5&req=2&csor=2&pwd=h&cb=jQuery110206980964932320619_1631784744240&_=1631784744242

	// 简化
	// https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn

	// 参数
	// prod=pc  pc端
	// wd=h5   搜索的关键词
	// cb=fn   接口返回的函数名 

	// 数据
	// {
	// 	g:[]  存放搜索的数据,
	// 	q:  搜索的关键词
	// }

	var searchCon = document.getElementsByClassName("searchCon")[0];
	var searchList = document.getElementsByClassName("searchList")[0];

	var start = Date.now(); // 记录开始的时间
	var now = Date.now();   // 记录每次时输入的时间

	searchCon.oninput = function () {
		var key = this.value;
		if (key) {
			searchList.style.display = "block";
			// now = Date.now();
			// if(now-start > 100){  //每次输入 当前时间 - 起始时间 > 间隔时间
			// 1. 搜索时 根据搜索的数据 动态请求 ?
			// 通过动态创建script =>  配置src => 当script放到页面时会请求
			var script = document.createElement("script");
			script.src = `https://www.baidu.com/sugrec?prod=pc&wd=${key}&cb=fn`;
			// 通过动态创建script =>  配置src => 当script放到页面时会请求
			document.body.appendChild(script);
			// 2. 请求完毕  => 删除script标签
			script.onload = function () {
				this.remove();
			}
			// start = now;
			// }
		} else {
			searchList.style.display = "none";
		}

	}

	function fn(data) {
		console.log(data);
		var {g: list} = data;
		var html = "";
		if (list) { //有值就是数据  没有值就是 undefined
			list.forEach(item => {
				// console.log(item);
				var {q} = item;
				html += `<li><a href="">${q}</a></li>`
			})
		}
		searchList.innerHTML = html;
	}


</script>
<!-- 页面加载时 => 发送 -->
<!-- <script type="text/javascript" src=" https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn"></script> -->

</html>